import moment from 'moment/moment';
import { Space, Tooltip } from 'antd';
import React from 'react';
import styles from './index.less';
import { InfoCircleOutlined } from '#/utils/antdIcons';
import { TIME_96 } from '@/pages/ETrade/components/helper';
import { getBaseKeys, getXAxisData } from '../../helper';

export const platformOptions = [
  { label: '结算端', value: 'settle' },
  { label: '发电端', value: 'generate' },
];

export const unitOptions = [
  { label: '功率 MW', value: 'MW' },
  { label: '电量 MWh', value: 'MWh' },
];

const headerTitle = (title, tooltip) => (
  <Space>
    <div>{title}</div>
    <Tooltip title={tooltip}>
      <InfoCircleOutlined />
    </Tooltip>
  </Space>
);

export const column = [
  {
    code: 'issueTime',
    name: '申报时间',
    width: 150,
    align: 'center',
    render(v) {
      return v ? moment(v).format('YYYYMMDD HHmm') : '-';
    },
  },
  {
    code: 'wfName',
    name: '申报平台',
    width: 150,
    align: 'center',
  },
  {
    code: 'dataSourceName',
    name: '下发主站',
    width: 150,
    align: 'center',
    render(v) {
      return v || '-';
    },
  },
  {
    code: 'executeStatus',
    name: headerTitle(
      '执行状态',
      '效益评估模型主要考量调整策略对现货市场收益的影响，含现货超额收益回收，不包含中长期回收（沉没成本）以及双细则考核部分。',
    ),
    dataIndex: 'executeStatus',
    width: 150,
    align: 'center',
    render(v, record) {
      const _data = EXECUTION_STATUS.find((i) => i.value === v);
      return _data ? (
        <div className={styles.executeStatus}>
          <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
          {_data.detail ? (
            <Tooltip placement="bottomLeft" title={record.statusReason}>
              <a>详情</a>
            </Tooltip>
          ) : (
            ''
          )}
        </div>
      ) : (
        '-'
      );
    },
  },
  {
    code: 'statusFirst',
    name: headerTitle(
      '执行反馈',
      '执行成功分两种情况：绿色表示申报调整策略基于最新的功率预测结果进行；黄色表示申报调整策略基于次新的功率预测结果进行。',
    ),
    width: 150,
    align: 'center',
    render(v) {
      const _data = EXECUTION_FEEDBACK_STATUS.find((i) => i.value === v);
      return _data ? (
        <div className={styles.statusLast}>
          <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
        </div>
      ) : (
        '-'
      );
    },
  },
  {
    code: 'statusSecond',
    name: headerTitle(
      '申报校验',
      '对“发送至主站数据”与“主站上送调度数据”进行比对校验，一致为成功，否则为失败。部分场站由于规则原因无法进行该项比对，则显示为“-”',
    ),
    width: 150,
    align: 'center',
    render(v) {
      const _data = DECLARATION_CHECKOUT.find((item) => item.value === v);
      return _data ? (
        <div className={styles.statusLast}>
          <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
        </div>
      ) : (
        '-'
      );
    },
  },
  {
    code: 'statusLast',
    name: headerTitle(
      '出清校验',
      '对“发送至主站数据”与“交易中心披露出清数据”进行比对校验，一致为成功，否则为失败。注，由于出清原因不可控，本项比对设置一定容差',
    ),
    width: 150,
    align: 'center',
    render(v) {
      const _data = OUT_CHECKOUT.find((item) => item.value === v);
      return _data ? (
        <div className={styles.statusLast}>
          <div className={`${styles.status_box} ${styles[_data.class]}`}>{_data.label}</div>
        </div>
      ) : (
        '-'
      );
    },
  },
];

// 出清校验
export const OUT_CHECKOUT = [
  {
    label: '成功',
    value: 1,
    color: '#30D485',
    logoType: 'CheckCircleOutlined',
    class: 'success',
  },
  {
    label: '失败',
    value: 0,
    color: '#FD4F43',
    logoType: 'CloseCircleOutlined',
    class: 'error',
  },
  {
    label: '-',
    value: 2,
    class: '',
  },
];

// 申报校验
const DECLARATION_CHECKOUT = [
  {
    label: '成功',
    value: 1,
    color: '#30D485',
    logoType: 'CheckCircleOutlined',
    class: 'success',
  },
  {
    label: '失败',
    value: 2,
    color: '#FD4F43',
    logoType: 'CloseCircleOutlined',
    class: 'error',
  },
  {
    label: '-',
    value: 0,
    class: '',
  },
];

// 执行反馈状态
const EXECUTION_FEEDBACK_STATUS = [
  {
    label: '成功',
    value: 1,
    color: '#30D485',
    logoType: 'CheckCircleOutlined',
    class: 'success',
  },
  {
    label: '成功',
    value: 2,
    color: '#FF9F0A',
    logoType: 'CheckCircleOutlined',
    class: 'partialSuccess',
  },
  {
    label: '失败',
    value: 0,
    color: '#FD4F43',
    logoType: 'CloseCircleOutlined',
    class: 'error',
  },
];

// 执行状态
const EXECUTION_STATUS = [
  { label: '未执行', value: 0, class: '', detail: false },
  { label: '已执行', value: 1, class: '', detail: false },
  {
    label: '成功',
    class: 'success',
    value: 2,
    detail: false,
  },
  {
    label: '成功',
    value: 4,
    class: 'partialSuccess',
    detail: true, //部分成功
  },
  {
    label: '无调整',
    value: 3,
    class: 'unadjusted',
    detail: true,
  },
  {
    label: '失败',
    value: 5,
    class: 'error',
    detail: true, //日期错误
  },
  {
    label: '失败',
    value: 6,
    class: 'error',
    detail: true,
  },
  { label: '已调整', value: 7, class: 'partialSuccess', detail: true },
];

export const getTableData = (data = {}, dateKey) => {
  const keys = getBaseKeys(data);
  const arr = [];
  keys.map((k) => {
    const name = data?.[k + 'Source'];
    const value = data?.[k + 'Values']?.[dateKey] || [];
    const obj = {
      type: name,
    };
    value.map((v, i) => {
      obj[TIME_96[i]] = v;
    });
    arr.push(obj);
  });
  return arr;
};

export const getChartOption = (data = {}, dateKey, unit, calendarDate) => {
  const keys = getBaseKeys(data);
  let series = keys.map((k) => {
    const arr = data?.[k + 'Values']?.[dateKey] || [];
    const name = data?.[k + 'Source'];
    const color = data?.[k + 'Colour'];
    return {
      data: arr,
      type: name === '基数' || name === '市场化中长期' ? 'bar' : 'line',
      name,
      color,
    };
  });
  // 图不展示这三条
  series = series.filter(
    (i) => !(i.name === '调整方式' || i.name === '调整依据' || i.name === '调整参数'),
  );
  return {
    grid: {
      top: 28,
      left: 46,
      bottom: 45,
      right: 30,
    },
    tooltip: {
      textStyle: {
        fontSize: 12,
      },
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all',
        },
      ],
      lineStyle: {
        color: '#4e5154',
        type: 'solid',
      },
    },
    legend: {
      top: 'bottom',
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 8,
      textStyle: {
        color: '#a7a8a9',
        fontSize: 12,
      },
      inactiveBorderWidth: 'inherit',
    },
    yAxis: [
      {
        type: 'value',
        name: unit,
      },
    ],
    xAxis: [
      {
        type: 'category',
        data: getXAxisData(calendarDate, data?.xAxis || []),
      },
    ],
    series,
  };
};
